<template>
  <div class="px-22px w-full">
    <div class="flex mt-22px w-full bg-mask-3 h-96px items-center text-16px text-white relative">
      <div class="w-52px h-52px ml-22px border-img rounded-[50%]">
        <img :src="user.GetAvatar" alt="" />
      </div>
      <div class="ml-14px flex flex-col">
        <div>{{ user.GetUserName }}</div>
        <div v-if="!user.level" class="text-12px mt-6px" style="color: #c5c5c5">
          你还不是会员，开通会员尊享会员权益
        </div>
        <div v-else class="flex items-center">
          <n-icon size="26">
            <svg
              width="26"
              height="14"
              viewBox="0 0 26 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M20.8 0.599609H4.8C3.52696 0.599609 2.30606 1.10532 1.40589 2.0055C0.505713 2.90567 0 4.12657 0 5.39961V8.59961C0 9.22995 0.124156 9.85413 0.365378 10.4365C0.606601 11.0189 0.960166 11.548 1.40589 11.9937C2.30606 12.8939 3.52696 13.3996 4.8 13.3996H20.8C21.4303 13.3996 22.0545 13.2755 22.6369 13.0342C23.2192 12.793 23.7484 12.4394 24.1941 11.9937C24.6398 11.548 24.9934 11.0189 25.2346 10.4365C25.4758 9.85413 25.6 9.22995 25.6 8.59961V5.39961C25.6 4.12657 25.0943 2.90567 24.1941 2.0055C23.2939 1.10532 22.073 0.599609 20.8 0.599609ZM7.848 10.9996H7.76C7.59572 10.9806 7.44135 10.9112 7.31814 10.8009C7.19494 10.6906 7.10894 10.5448 7.072 10.3836L5.616 3.98361C5.59289 3.87855 5.59069 3.76997 5.60954 3.66407C5.6284 3.55816 5.66792 3.457 5.72586 3.36637C5.84289 3.18334 6.02783 3.05429 6.24 3.00761C6.45217 2.96093 6.6742 3.00045 6.85723 3.11747C7.04027 3.2345 7.16932 3.41944 7.216 3.63161L8.128 7.79961L10.248 3.44761C10.2892 3.3456 10.3509 3.25318 10.4294 3.17612C10.5079 3.09905 10.6014 3.039 10.7042 2.99972C10.8069 2.96044 10.9167 2.94277 11.0266 2.94782C11.1364 2.95286 11.2441 2.98051 11.3428 3.02904C11.4415 3.07757 11.5292 3.14594 11.6003 3.22987C11.6714 3.3138 11.7244 3.41149 11.7561 3.51684C11.7877 3.62219 11.7973 3.73294 11.7842 3.84215C11.7711 3.95137 11.7356 4.05672 11.68 4.15161L8.568 10.5516C8.50203 10.6863 8.39955 10.7996 8.27224 10.8789C8.14494 10.9581 7.99794 10.9999 7.848 10.9996ZM13.024 10.3356C12.9916 10.5234 12.8932 10.6935 12.7466 10.8153C12.5999 10.937 12.4146 11.0024 12.224 10.9996C12.1763 11.0075 12.1277 11.0075 12.08 10.9996C11.8726 10.9625 11.6882 10.8451 11.5669 10.6728C11.4456 10.5005 11.3971 10.2874 11.432 10.0796L12.56 3.67961C12.5961 3.46744 12.7149 3.27828 12.8905 3.15376C13.066 3.02923 13.2838 2.97954 13.496 3.01561C13.7082 3.05168 13.8973 3.17056 14.0219 3.34609C14.1464 3.52162 14.1961 3.73944 14.16 3.95161L13.024 10.3356ZM20.272 5.53561C20.1517 6.16119 19.8211 6.72683 19.3351 7.13864C18.8491 7.55046 18.2368 7.78368 17.6 7.79961H16.672L16.224 10.3356C16.1916 10.5234 16.0932 10.6935 15.9466 10.8153C15.7999 10.937 15.6146 11.0024 15.424 10.9996C15.3763 11.0075 15.3277 11.0075 15.28 10.9996C15.0726 10.9625 14.8882 10.8451 14.7669 10.6728C14.6456 10.5005 14.5971 10.2874 14.632 10.0796L15.2 6.87961C15.2289 6.68885 15.3258 6.51497 15.4728 6.39001C15.6198 6.26505 15.8071 6.19743 16 6.19961H17.6C17.8594 6.18334 18.1065 6.08328 18.3042 5.91448C18.5018 5.74568 18.6393 5.51727 18.696 5.26361C18.7164 5.17967 18.7176 5.09224 18.6996 5.00776C18.6816 4.92329 18.6448 4.84395 18.592 4.77561C18.5388 4.7167 18.4731 4.67036 18.3998 4.63992C18.3265 4.60948 18.2473 4.59571 18.168 4.59961H16.568C16.3558 4.59961 16.1523 4.51532 16.0023 4.36529C15.8523 4.21527 15.768 4.01178 15.768 3.79961C15.768 3.58744 15.8523 3.38395 16.0023 3.23392C16.1523 3.08389 16.3558 2.99961 16.568 2.99961H18.168C18.4804 2.99556 18.7899 3.06008 19.0746 3.18863C19.3594 3.31718 19.6124 3.50662 19.816 3.74361C20.0185 3.99077 20.1642 4.27934 20.243 4.58897C20.3218 4.8986 20.3317 5.22174 20.272 5.53561Z"
                :fill="level?.theme"
              />
            </svg>
          </n-icon>
          <div :style="{ color: level?.theme }" class="text-12px ml-3px">{{ level?.name }}</div>
          <div class="absolute top-0 right-0 w-94px h-87px">
            <n-icon size="94">
              <svg
                width="94"
                height="87"
                viewBox="0 0 94 87"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M58.2733 87H50.5164V49.8306H58.2733V87ZM91.8423 68.9187C89.7738 72.0285 86.5527 73.5686 82.1646 73.5686H73.27V87H65.513V49.8306H82.475C86.0654 49.8306 88.8874 50.8968 90.9265 53.0145C92.9802 55.1321 93.9998 58.0345 93.9998 61.7367C94.0146 64.343 93.2906 66.742 91.8427 68.9188M7.22489 87V7.84847C7.22489 7.52268 6.95888 7.25619 6.63394 7.25619H0.590944C0.265888 7.25619 0 6.98958 0 6.66392V0.592399C0 0.26661 0.26601 0.00012102 0.590944 0.00012102H28.3388C28.6639 0.00012102 28.9297 0.266732 28.9297 0.592399V36.2513L65.1733 0.177658C65.2767 0.0739424 65.4393 0 65.5869 0H92.6107C93.1426 0 93.3937 0.636813 93.0244 1.00702L7.22489 87ZM84.6616 57.4421C83.5978 56.6573 81.8544 56.2575 79.4313 56.2575H73.2701V67.1417H80.4656C82.9479 67.1417 84.6322 66.3865 85.5336 64.876C86.0212 64.0467 86.2576 62.8768 86.2576 61.3664C86.2576 59.5449 85.7257 58.2418 84.6619 57.4421"
                  :fill="level?.theme"
                  fill-opacity="0.5"
                />
              </svg>
            </n-icon>
          </div>
        </div>
        <div v-if="user.level" style="color: #bebebe" class="text-10px">
          有效期至 {{ user.levelTimeout }}
        </div>
      </div>
      <div class="ml-182px cursor-pointer relative" @click="gocart">
        <img :src="myCart" alt="" />
        <div
          v-if="cartStore.totalPieces > 0"
          class="absolute bg-badge w-18px h-18px leading-18px text-center rounded-[50%] text-12px text-white -top-8px -right-5px"
        >
          {{ cartStore.totalPieces }}
        </div>
      </div>
      <div class="ml-12px cursor-pointer">我的购物车</div>
      <div class="ml-134px cursor-pointer" @click="gocoupon"><img :src="myCoupon" alt="" /></div>
      <div class="ml-12px cursor-pointer" @click="gocoupon">我的优惠券</div>
    </div>
    <!-- <div
      class="w-full h-116px bg-main relative flex items-center text-white mt-20px justify-between px-15px"
    >
      <div class="flex flex-col items-center font-bold text-30px">
        <span>会员权益</span>
        <span>VIP</span>
      </div>
      <div v-for="item in list" :key="item.name" class="flex flex-col items-center text-white">
        <img :src="item.icon" alt="" class="mb-8px" />
        <span class="text-18px leading-27px">{{ item.name }}</span>
        <span class="text-10px" style="color: #e9e9e9">{{ item.content }}</span>
      </div>
      <div
        style="border: 2px solid #fff; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2)"
        class="w-129px h-39px rounded-59px text-18px flex items-center justify-center cursor-pointer"
        @click="govip"
      >
        {{ user.level ? '续费 >' : '立即开通 >' }}
      </div>
      <div class="absolute -left-10px -top-25px">
        <img :src="VipHeaderIcon" alt="" />
      </div>
    </div> -->
    <div class="mt-32px max-w-full">
      <div class="color-white-opacity-8 text-18px leading-26px mb-14px">我的订单</div>
      <div class="bg-mask-3 px-68px pt-34px flex justify-between text-18px text-white pb-24px">
        <div class="flex flex-col items-center cursor-pointer relative" @click="gouserorder(1)">
          <img :src="toPay" alt="" /><span class="mt-15px leading-22px">待付款</span>
          <div
            v-if="Object.keys(pendingSkuData)?.length > 0"
            class="absolute bg-badge w-18px h-18px leading-18px text-center rounded-[50%] text-12px text-white -top-8px right-1px"
          >
            {{ Object.keys(pendingSkuData)?.length }}
          </div>
        </div>
        <div class="flex flex-col items-center cursor-pointer relative" @click="gouserorder(2)">
          <img :src="comment" alt="" /><span class="mt-15px leading-22px">待收货</span>
          <div
            v-if="Object.keys(commentData)?.length > 0"
            class="absolute bg-badge w-18px h-18px leading-18px text-center rounded-[50%] text-12px text-white -top-8px right-1px"
          >
            {{ Object.keys(commentData)?.length }}
          </div>
        </div>
        <div class="flex flex-col items-center cursor-pointer" @click="gouserorder(3)">
          <img :src="finish" alt="" /><span class="mt-15px leading-22px">已完成</span>
        </div>
        <div class="flex flex-col items-center cursor-pointer" @click="gouserorder(undefined)">
          <img :src="allOrder" alt="" /><span class="mt-15px leading-22px">全部订单</span>
        </div>
      </div>
      <div class="h-1px bg-mask-3">
        <div class="bg-mask-white-2 h-1px mx-68px"></div>
      </div>
      <div class="px-68px py-24px bg-mask-3 overflow-x-hidden h-142px w-1044px">
        <n-carousel autoplay :interval="2000" :show-dots="false">
          <div
            v-for="(items, musterOrderId) in pendingSkuData"
            :key="musterOrderId"
            class="flex relative w-full"
          >
            <div v-for="item in items" :key="item.id" class="w-72px h-72px mr-14px rounded-2px">
              <img
                v-if="Number(item.is_combo) === 0"
                class="w-full h-full rounded-2px"
                :src="JSON.parse(item.skus)?.[0].url"
                alt=""
              />
              <img
                v-if="Number(item.is_combo) === 1"
                class="w-full h-full"
                :src="JSON.parse(item.imgs || '[]')?.[0]?.url"
                alt=""
              />
            </div>
            <div class="mt-6px">
              <div class="text-white text-12px mt-10px">等待付款</div>
              <div class="flex items-center text-12px leading-19px mt-10px text-white">
                <span class="color-secondary">剩余时间</span>
                <span class="w-6px"></span>
                <n-countdown :duration="items?.[0]?.timeout" :active="true" class="font-medium" />
              </div>
            </div>
            <div
              class="top-22px bg-sup w-76px h-28px text-center rounded-24px leading-28px font-medium text-14px color-word absolute right-0 cursor-pointer"
              @click="gopay(musterOrderId)"
            >
              去支付
            </div>
          </div>
        </n-carousel>
      </div>
      <div
        class="color-white-opacity-8 text-18px leading-26px mb-14px mt-32px cursor-pointer"
        @click="gohelp"
      >
        帮助与反馈
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, onUnmounted } from 'vue'
import { useUserStore } from '@renderer/store/modules/user'
import myCart from '@renderer/assets/myCart.svg'
import toPay from '@renderer/assets/toPay.svg'
import comment from '@renderer/assets/comment.svg'
import finish from '@renderer/assets/finish.svg'
import allOrder from '@renderer/assets/allOrder.svg'
import myCoupon from '@renderer/assets/myCoupon.svg'
import { useRouter } from 'vue-router'
import useHttp from '@renderer/utils/http'
import { useCartStore } from '@renderer/store/modules/cart'
import SuperGiftIcon from '@renderer/assets/superGift.svg'
import NetDiscountIcon from '@renderer/assets/netDiscount.svg'
import VipActivityIcon from '@renderer/assets/vipActivity.svg'
import BirthdayIcon from '@renderer/assets/birthday.svg'
// import KeepSeatIcon from '@renderer/assets/keepSeat.svg'
import VipHeaderIcon from '@renderer/assets/vipHeader.svg'

const data = ref<any[]>([])
const router = useRouter()
const user = useUserStore()
const cartStore = useCartStore()
const list = ref<any>([
  {
    icon: SuperGiftIcon,
    name: '超值礼包',
    content: '充值上网聚划算'
  },
  {
    icon: NetDiscountIcon,
    name: '上网折扣',
    content: '最高优惠8折'
  },
  {
    icon: VipActivityIcon,
    name: '充值优惠',
    content: '会员专享'
  },
  {
    icon: BirthdayIcon,
    name: '生日特权',
    content: '当天免费上网'
  }
  // {
  //   icon: KeepSeatIcon,
  //   name: '订座保留',
  //   content: '额外免费30分钟'
  // }
])
const gocart = () => {
  router.replace({ name: 'Cart' })
}

const gopay = (musterOrderId) => {
  router.replace({ name: 'Pay', query: { musterOrderId } })
}
const pendingSkuData = computed(() => {
  const orders: any = {}
  Object.keys(data.value).forEach((musterOrderId) => {
    const order = data.value[musterOrderId]?.[0]
    if (order.status === 1) {
      orders[musterOrderId] = data.value[musterOrderId]
    }
  })
  console.log(orders)
  return orders
})
const commentData = computed(() => {
  const orders: any = {}
  Object.keys(data.value).forEach((musterOrderId) => {
    const order = data.value[musterOrderId]?.[0]
    if (order.status === 2) {
      orders[musterOrderId] = data.value[musterOrderId]
    }
  })
  return orders
})

const gouserorder = (status) => {
  router.replace({ name: 'UserOrder', query: { active: status } })
}

const gohelp = () => {
  router.push({ name: 'Help' })
}

const govip = () => {
  router.replace({ name: 'Vip' })
}
const timers: any = []
const init = async () => {
  const { data: res } = await useHttp('/order/user/c/list').get().json()
  if (res.value.code === 200) {
    data.value = res.value.data
    Object.keys(res.value.data).forEach((musterOrderId) => {
      const orders = res.value.data[musterOrderId]
      const order = orders[0]
      if (order && order.timeout > 0) {
        timers.push(
          setTimeout(() => {
            timers.forEach((timer) => {
              clearTimeout(timer as number)
              timer = null
            })
            init()
          }, order.timeout)
        )
      }
    })
  }
}
onMounted(async () => {
  await init()
})

onUnmounted(() => {
  timers.forEach((timer) => {
    clearTimeout(timer)
    timer = null
  })
  timers.splice(0, timers.length)
})

const level = computed(() => {
  if (!user.level) {
    return
  }
  return vips.value.find((vip) => vip.id === user.level)
})

const vips = computed(() => user.vipInfo)

const gocoupon = () => {
  router.replace({ name: 'UserCoupon' })
}
</script>

<style scoped></style>
